<template>
    <div>
        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
        </el-input>
        <el-tree class="filter-tree" :auto-expand-parent="expandParent" :data="TreeData" @node-click="onNodeClick" :props="defaultProps" :filter-node-method="filterNode" ref="tree2">
        </el-tree>
    </div>
</template>

<script>
export default {
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val);
    }
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    onNodeClick(){
       this.$emit('onNodeClick',...arguments);
    }
  },
  data() {
    return {
      filterText: "",
      expandParent:false,
      defaultProps: {
        children: "children",
        label: "label"
      },
      inputHeight:'30px'
    };
  },
  props:{
     TreeData:[Object,Array]
  }
};
</script>

<style lang="scss" scoped>

.el-tree{
    background: #e9eef3;
    overflow: auto;
    max-height:30rem;;
}
.filter-tree{
    margin-top:20px;
    padding: 0 5px;
}

</style>